<template>
  <div class="flex items-center justify-between h-screen">
    <div class="w-[300px] bg-gray-200 h-full border-r border-gray-300">
      <div class="h-[90%] overflow-y-auto">
        <ConversationList :items="items" />
      </div>
      <div class="h-[10%] grid grid-cols-2 gap-2 p-2">
        <RouterLink to="/">
          <Button icon-name="radix-icons:chat-bubble" class="w-full">
            {{ t("common.newChat") }}
          </Button>
        </RouterLink>

        <RouterLink to="/settings">
          <Button icon-name="radix-icons:gear" plain class="w-full">
            {{ t("common.settings") }}
          </Button>
        </RouterLink>
      </div>
    </div>
    <div class="h-full flex-1">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { initI18n } from "./i18n";
import ConversationList from "./components/ConversationList.vue";
import Button from "./components/Button.vue";
import { useConversationStore } from "./stores/conversation";
import { useProviderStore } from "./stores/provider";
import { initProviders } from "./db";

const { t } = useI18n();
const conversationStore = useConversationStore();
const provdierStore = useProviderStore();
const items = computed(() => conversationStore.items);

onMounted(async () => {
  await initI18n();
  await initProviders();
  // 获取最初需要的数据
  conversationStore.fetchConversations();
  provdierStore.fetchProviders();
});
</script>
